<template>
  <el-tree
      :data="treeData"
      :props="defaultProps"
      node-key="code"
      :default-expanded-keys="JSON.parse(JSON.stringify(defaultExpandKeys))"
      :current-node-key="currentLivingId"
      :expand-on-click-node="false"
      :highlight-current-row="highlightCurrentRow"
      ref="editTree"
      :load="loadNode"
      @node-click="handleNodeClick"
      lazy
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>
        <img
          v-if="(data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 6
          && node.expanded === false"
          src="@/assets/node_-1.gif"
          alt
        />
        <img
          v-if="(data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 6
          && node.expanded === true"
          src="@/assets/node_-1_open.gif"
          alt
        />
        <img
          v-else-if="((data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 9
           || (data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 16)
           && node.expanded === false"
          src="@/assets/node_0.gif"
          alt
        />
        <img
          v-else-if="((data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 9
           || (data.code==null?data.CODE==null?data.JGSY_CODE:data.CODE:data.code).length === 16)
           && node.expanded === true"
          src="@/assets/node_0_open.gif"
          alt
        />
        <img
          v-else-if="data.JGSY_TYPE === '04'"
          src="@/assets/node_1.gif"
          alt
        />
        <img
          v-else-if="data.JGSY_TYPE === '05'"
          src="@/assets/node_2.gif"
          alt
        />
        <img
          v-else-if="data.JGSY_TYPE === '06'"
          src="@/assets/node_10.gif"
          alt
        />
        <img
          v-else-if="data.JGSY_TYPE === '12'"
          src="@/assets/node_5.gif"
          alt
        />
        {{ data.label == null ? (data.DESP == null ? data.JGSY_NAME : item.DESP) : data.label }}
      </span>
      <!--      &lt;!&ndash;新增按钮  如果node.level等于1即 该节点为一级父节点，则出现新增按钮&ndash;&gt;-->
      <!--      <el-button type="text" size="mini" @click="() => append(data, node)" v-if="node.level === 1"><i class = "el-icon-plus"></i></el-button>-->
      <!--      &lt;!&ndash;删除按钮&ndash;&gt;-->
      <!--      <el-button type="text" size="mini" @click = "() => remove(node, data)"><i class = "el-icon-delete"></i></el-button>-->
      <!--      &lt;!&ndash;编辑按钮&ndash;&gt;-->
      <!--      <el-button type="text" size="mini" @click = "() => edit(node, data)"><i class="el-icon-edit"></i></el-button>-->
    </span>
  </el-tree>
</template>
<!--<style>-->
<!--  .el-tree{-->
<!--    background-color: #def3f7;-->
<!--  }-->
<!--</style>-->
<script>
import _ from 'lodash';
import axios from "axios";

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    highlightCurrentRow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      treeData: [],
      defaultExpandKeys: [],
      currentLivingId: "",
      defaultProps: {
        children: 'children',// 作为children的属性 是children
        label: 'label', // 作为label的属性 是label
        isLeaf: 'leaf'  // 是否叶子节点
      }
    }
  },
  // 页面渲染前调用
  created() {
    // if (this.$route.params.code) {
    //   this.defaultExpandKeys = ['410000'];
    // }
  },
  watch: {
  },
  methods: {
    // append(data, node) {
    //   console.log("新增一个 ---- " + data.label);
    // },
    // remove(node, data) {
    //   console.log("删除一个 ---- " + data.label);
    // },
    // edit(node, data) {
    //   console.log("编辑节点 ---- " + data.label);
    // },

    // 加载树数据
    loadNode(node, resolve) {
      let that = this;
      if (node.level === 0) {// node.level === 0 是初始化树状图最开始就展示的数据

        that.loadTreeData(resolve);// 加载初始页面的父节点
      }
      if (node.level >= 1) {
        this.getChildByList(node.data, resolve);// 通过node,加载当前节点的直接子节点
        return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
      }
    },

    // 加载初始父节点
    loadTreeData(resolve) {      // 获取loadTreeData就是父节点数据，getChildByList就是异步获取子节点数据
      axios.get("/HNSMZ/tree/getParentNode", {
        params: {
          code: '410000'
        }
      }).then(res => {
        // 转化请求到的数据
        let data = res.data.data;
        // 设置结点的label属性
        data.label = data.desp;
        // 设置当前位置
        data.location = data.label;
        // console.log("父节点：" + data.desp);
        resolve([data]);// 处理数据
      }).catch(err => {
        console.log(err);
      });
    },

    // 加载子节点
    getChildByList(parent, resolve) {     // 获取子节点请求
      // console.log("参数1： " + parent);// 410000
      // console.log("参数2： " + resolve);
      axios.get("/HNSMZ/tree/getChildrenNode", {
        params: {
          // 获取机构的代码，由于map中的key有所不同，会有以下三种获取的方式，分别为code(系统)、CODE(区划)、JGSY_CODE(机构)
          code: parent.code == null ? parent.CODE == null ? parent.JGSY_CODE : parent.CODE : parent.code
        }
      }).then(res => {
        // 转化请求到的数据
        let data = res.data.data;
        // 循环遍历获取到的数据
        data.forEach(item => {
          // 设置结点的label属性
          item.label == null ? (item.DESP == null ? item.label = item.JGSY_NAME : item.label = item.DESP) : 1;
          // let currentCode = item.code == null ? item.CODE == null ? item.JGSY_CODE : item.CODE : item.code;
          // if (currentCode.length === 21) {
          //   item.leaf = true;// 设置最后一级为叶子节点，其将不会再出现下三角图标
          // }
          // 设置当前位置
          item.location= parent.location + "--" +  item.label.trim();
          // console.log("每个子节点： " + item.label + "-----" + currentCode + "----" + item.leaf);
        });
        resolve(data);// 处理数据
      }).catch(err => {
        console.log(err);
      });
    },

    // 节点被点击时的回调
    handleNodeClick(data) {
      // 选择树的点击事件
      // let code = data.code == null ? data.CODE == null ? data.JGSY_CODE : data.CODE : data.code;
      // window.document.getElementById("jgsyName").value = data.label;
      // window.document.getElementById("jgsyCode").value = code;


      // 机构树的点击事件
      console.log(data);
      // 当节点被点击时,根据不同的条件,右侧frame跳转
      let code = data.code == null ? data.CODE == null ? data.JGSY_CODE : data.CODE : data.code
      if(code.length !== 16) {// 不是内设、下设、事业标签才跳转
        if(code.length === 6) {// 省市县
          let path = CONTEXT_PATH + "/iframe/sright?jgsyCode=" + code + "&location=" + data.location;// 跳转路径
          window.parent.window.document.getElementById("right").setAttribute("src", path);
        } else {
          let path = CONTEXT_PATH + "/iframe/right?jgsyCode=" + code + "&location=" + data.location;// 跳转路径
          window.parent.window.document.getElementById("right").setAttribute("src", path);
        }
      }

      axios.get("/HNSMZ/tree/clickNode", {
        params: {
          code: code
        }
      }).then(res => {

      }).catch(err => {
        console.log(err);
      });
    },

  },
  mounted() {
  }
}

</script>
